<template>
    <div class="box">
        <div class="title">
                <span>游客比例</span>
            <p></p>

            <div class="boxright">可预约的总量<span>13123</span>人</div>
        </div>
        <div class="number">
            <span v-for="item in num">{{ item }}</span>
        </div>
        <div class="chart" ref="echart">
        </div>
   </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
let num = ref('216908')
let echart = ref()
onMounted(()=>{
   let  myChart = echarts.init(echart.value);
   myChart.setOption({
    title: {
          text: '水球图'
        },
        series: [{
        type: 'liquidFill',
        radius:'60%',
        data: [0.6, {
            value: 0.5,
            itemStyle: {
                color: 'red'
            }
        }, 0.4, 0.3]
    }]
   })
})
</script>
<style scoped lang="scss">
.box{
    background: url('@/assets/image/screen/touristlb.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    height: 400px;
    .title{
        position: relative;
        justify-content: space-between;
        font-weight: 400;
        font-size: 20px;
        color: white;
        height: 60px;
    }
    p{
        margin-top: 10px;
        width: 68px;
        height: 7px;
        background: url('@/assets/image/screen/dataScreen-title.png') no-repeat;
        background-size: 100% 100%;
    }
    .boxright{
        position: absolute;
        right: 0;
        color: white;
        span{
            color: yellow;
        }
    }
    .number{
        display: flex;
        color: wheat;
        display: flex;
        padding: 20px;
        span{
            flex: 1;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: url('@/assets/image/screen/total.png');
            background-size: 100% 100%;
        }
    }
}
.chart{
    width: 100%;
    height: 200px;
    // background-color: red;
}
</style>